<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css">
    <style>
        html,body {
            height: 100%;
        }

        #search-input {
            margin-top: 5px;
            font-size: 14px;
            text-align: center;
        }

        .aui-icon-search{
          top: 7px;
          left: 80px;
        }

        .aui-bar {
            background-color: #67B4F5;
        }

        .aui-searchbar {
            height: 40px;
        }

        .aui-searchbar-input {
            height: 30px;
        }

        .aui-iconfont {
            position: relative;
            /*font-family:"auiicon" !important;*/
            padding-top: 10px;
            font-size: 14px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        /*item样式*/

        .item {
            background-color:#fff;
            display: table;
            height: 50px;
            line-height: 50px;
            width: 100%;
            border-bottom: 1px solid #F0F0F0;
        }

        .item .itemlogo,
        .item .itemshelf {
            display: table-cell;
            vertical-align: middle;
        }

        .item .itemlogo {
            width: 60px;

        }

        .item .itemlogo img {
            margin-left: 10px;
            width: 30px;
            border-radius: 50%;
        }

        .item .itemshelf .shelfinfo01 {
            font-size: 16px;
            color: #AFAFAF;
        }
        /* 条目特例 */

        .login {
            height: 70px;
            border-bottom: 2px solid #3993CF;
        }

        .login .itemlogo {
            width: 80px;
        }

        .login .userlogo img {
            width: 60px;
        }
        /* 底部美食相机 */

        .foodphone {
            position: absolute;
            bottom: 0;
            border-bottom: 0;
            border-top: 2px solid #38393F;
            height: 80px;
        }

        .foodphone .itemlogo {
            width: 80px;
        }

        .foodphone .itemlogo img {
            margin-left: 10px;
            width: 60px;
        }
        /* 悬停样式 */

        .itemhover {
            background-color: #D1D1D3;
        }

    </style>
</head>

<body>
    <!-- 搜索框 -->
    <div class="aui-searchbar" id="search">
        <div class="aui-searchbar-input aui-border-radius">
            <i class="aui-iconfont aui-icon-search"></i>
            <input type="search" placeholder="请输入搜索内容" id="search-input">
            <div class="aui-searchbar-clear-btn">
                <i class="aui-iconfont aui-icon-close"></i>
            </div>
        </div>
        <div class="aui-searchbar-btn" tapmode>取消</div>
    </div>

    <div class="item" tapmode="itemhover" onclick="openNewWin('systemMessage')">
        <div class="itemlogo"><img src="../image/msg.png" alt=""></div>
        <div class="itemshelf">

            <div class="shelfinfo01">系统消息</div>

        </div>
    </div>
    <div class="item" tapmode="itemhover" onclick="openNewWin('detailMessage')">
        <div class="itemlogo"><img src="../image/msg.png" alt=""></div>
        <div class="itemshelf">
            <div class="shelfinfo01">学院通知</div>

        </div>
    </div>
  <div class="item" tapmode="itemhover" onclick="openNewWin('detailMessage')">
        <div class="itemlogo"><img src="../image/msg.png" alt=""></div>
        <div class="itemshelf">
            <div class="shelfinfo01">学院通知</div>
        </div>
    </div>
  <div class="item" tapmode="itemhover" onclick="openNewWin('detailMessage')">
        <div class="itemlogo"><img src="../image/msg.png" alt=""></div>
        <div class="itemshelf">
            <div class="shelfinfo01">活动通知</div>
        </div>
    </div>
  <div class="item" tapmode="itemhover" onclick="openNewWin('detailMessage')">
        <div class="itemlogo"><img src="../image/msg.png" alt=""></div>
        <div class="itemshelf">
            <div class="shelfinfo01">活动通知</div>
        </div>
    </div>



</body>


</html>
<script type="text/javascript" src="script/api.js"></script>
<script type="text/javascript">
    apiready = function() {
        api.setRefreshHeaderInfo({
            visible: true,
            bgColor: 'rgba(0,0,0,0)',
            textColor: '#666',
            textDown: '下拉刷新',
            textUp: '释放刷新'
        }, function(ret, err) {
            loadData();
        });
        api.addEventListener({
            name: 'scrolltobottom'
        }, function(ret, err) {});
    }

    function loadData() {
        api.refreshHeaderLoadDone();
        api.parseTapmode();
    }

    function openNewWin(type) {
        api.openWin({
            name: type,
            url: './' + type + '.html',
            rect: {
                x: 0,
                y: 0,
                w: api.winWidth,
                h: api.winHeight
            },
            bounces: false,
            delay: 200,
            animation: {
                type: 'movein'
            }
        });
    }
</script>
